<template>
	<h3>原始效果</h3>
	<div style="height: 100px;width: 100px;background-color: antiquewhite;">行内引用样式</div>
	
	<h3>1.将style属性值绑定为字符串</h3>
	<div :style="{height: '100px',width:'100px',backgroundColor:'antiquewhite'}">对象</div>
	<div :style="{color:'red',fontSize:'20px'}">对象2</div>
	<h3>2.将style属性值绑定为数组</h3>
	<div :class="[style1,style2]">数组</div>
	
</template>

<script setup>
	import {ref,reactive,}from 'vue'
	const style1=reactive({height: '100px',width:'100px',backgroundColor:'antiquewhite'})
	const style2=reactive({color:'red',fontSize:'20px'})

</script>

<style scoped>
	
</style>